import { observer } from "mobx-react";
import counter from "./store/counter";

function App() {
  // const { increment, decrement } = counter;

  const handleIncrement = () => {
    counter.increment();
    // increment(); // 有问题：this指向问题，直接调用window，严格模式（use strict）下就是undefined
  };

  const handleDecrement = () => {
    counter.decrement();
    // decrement(); // 有问题
  };

  const handleIncrementIfOdd = () => {
    counter.incrementIffOdd();
  };

  const handleIncrementAsync = () => {
    counter.incrementAsync();
  };

  const { count, oddOrEven } = counter;

  return (
    <div>
      <p>
        count: {count}, count is {oddOrEven}
      </p>
      <button onClick={handleIncrement}>increment</button>
      <button onClick={handleDecrement}>decrement</button>
      <button onClick={handleIncrementIfOdd}>incrementIfOdd</button>
      <button onClick={handleIncrementAsync}>incrementAsync</button>
    </div>
  );
}

// observer高阶组件，让App变成响应式的组件
// 基本原理：监视counter数据变化，让App组件重新渲染
export default observer(App);
